<template>
  <div class="intent-box">
    <div class="intent-box_header">
      <i class="iconfont icon-yunyinle- icons"></i>
      <i class="iconfont icon-chaguji icons"></i>
    </div>
    <van-tabs v-model:active="activeName" type="card" title-inactive-color="#5b5b5b" title-active-color="#000000" color="#ffffff">
      <van-tab title="正计时" name="a">
        <div class="intent-bell-box">
          <div class="intent-bell">
            <van-time-picker show-toolbar="false"
              v-model="currentTime"
              :formatter="formatter"
              option-height="50px"
              visible-option-num="3"
              
            />
          
          </div>
          
        </div>
        <van-count-down :time="time" format=" HH 时 mm 分 "/>
      </van-tab>
      <van-tab title="倒计时" name="b">内容 2</van-tab>
      <van-tab title="番茄钟" name="c">内容 3</van-tab>
    </van-tabs>
  
  </div>



</template>

<script setup>
import { ref } from 'vue'

const currentTime = ref(['12', '00']);
    const formatter = (type, option) => {
      if (type === 'hour') {
        option.text += '时';
      }
      if (type === 'minute') {
        option.text += '分';
      }
      return option;
    };

</script>

<style lang="less" scoped>
.intent-box{
  height: 100%;
  background-image: url('@/assets/gzbj.jpg');
  .intent-box_header{
    height: 46px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 16px;
    .icons{
      font-size: 26px;
    }
  }
  .intent-bell-box{
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    .intent-bell{
    width:250px;
    height: 250px;
    border: 3px solid ;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  }
  
}
</style>

<style >
/* .van-tabs__nav--card {
  width: 200px;
  border-radius: 10px;
  background-color: #e5e5e6;
  margin: 0px 100px !important;
  padding: 1px
}


.van-tab {
  border-radius: 10px;
}

.van-tab--card {
  border-right: none;
} */

</style>